<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影清单</title>
    <link rel="stylesheet" href="../CSS/base.css">
    <link rel="stylesheet" href="../CSS/index.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="wrapper">
            <!-- 电影清单Logo -->
            <div class="logo">
                <h1><a href="#">电影清单</a></h1>
            </div>
            <!-- 主导航 -->
            <div class="nav">
                <ul>
                    <li><a href="#" class="active">我的收藏</a></li>
                    <li><a href="#">想看清单</a></li>
                    <li><a href="#">已看清单</a></li>
                </ul>
            </div>
            <!-- 搜索框 -->
            <div class="search">
                <input type="text" placeholder="搜索电影...">
                <button>搜索</button>
            </div>
        </div>
    </div>
    <!-- 主体内容区 -->
    <div class="main-content">
        <div class="movies-container">
            <!-- 第一行电影卡片 -->
            <div class="movie-card">
                <img src="../images/阿凡达1.jpg" alt="阿凡达" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">阿凡达</div>
                    <div class="movie-rating">评分: 8.5</div>
                    <div class="movie-comment">一部视觉震撼的科幻巨作，潘多拉星球的美景令人难忘。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/泰坦尼克号.jpg" alt="泰坦尼克号" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">泰坦尼克号</div>
                    <div class="movie-rating">评分: 9.2</div>
                    <div class="movie-comment">经典的爱情故事，杰克和露丝的浪漫让人感动。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/复仇者联盟.jpg" alt="复仇者联盟" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">复仇者联盟</div>
                    <div class="movie-rating">评分: 8.8</div>
                    <div class="movie-comment">超级英雄的集结，动作场面精彩绝伦。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/星球大战.jpg" alt="星球大战" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">星球大战</div>
                    <div class="movie-rating">评分: 8.7</div>
                    <div class="movie-comment">经典的太空歌剧，原力与光剑的传奇。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <!-- 第二行电影卡片 -->
            <div class="movie-card">
                <img src="../images/肖克申的救赎.jpg" alt="肖申克的救赎" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">肖申克的救赎</div>
                    <div class="movie-rating">评分: 9.7</div>
                    <div class="movie-comment">希望是美好的，自由是珍贵的。经典中的经典。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/盗梦空间.jpg" alt="盗梦空间" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">盗梦空间</div>
                    <div class="movie-rating">评分: 9.3</div>
                    <div class="movie-comment">诺兰的脑洞大作，梦境层层嵌套，烧脑神作。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/教父.jpg" alt="教父" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">教父</div>
                    <div class="movie-rating">评分: 9.3</div>
                    <div class="movie-comment">黑帮电影的巅峰之作，柯里昂家族的传奇。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/千与千寻.jpg" alt="千与千寻" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">千与千寻</div>
                    <div class="movie-rating">评分: 9.4</div>
                    <div class="movie-comment">宫崎骏的经典动画，充满想象力的奇幻世界。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <!-- 第三行电影卡片 -->
            <div class="movie-card">
                <img src="../images/美丽人生.jpg" alt="美丽人生" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">美丽人生</div>
                    <div class="movie-rating">评分: 9.5</div>
                    <div class="movie-comment">二战背景下的温情故事，父爱如山的感人篇章。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/当幸福来敲门.jpg" alt="当幸福来敲门" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">当幸福来敲门</div>
                    <div class="movie-rating">评分: 9.1</div>
                    <div class="movie-comment">励志经典，父亲与儿子的奋斗故事。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/阿甘正传.jpg" alt="阿甘正传" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">阿甘正传</div>
                    <div class="movie-rating">评分: 9.5</div>
                    <div class="movie-comment">人生就像一盒巧克力，你永远不知道下一颗是什么味道。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
            <div class="movie-card">
                <img src="../images/辛德勒的名单.jpg" alt="辛德勒的名单" class="movie-poster">
                <div class="movie-info">
                    <div class="movie-title">辛德勒的名单</div>
                    <div class="movie-rating">评分: 9.5</div>
                    <div class="movie-comment">黑白电影的杰作，人性光辉的赞歌。</div>
                    <div class="movie-actions">
                        <button class="btn btn-want" onclick="addToWant(this)">加入想看</button>
                        <button class="btn btn-watched" onclick="markAsWatched(this)">标记已看</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 添加到想看清单功能
        function addToWant(button) {
            // 改变按钮样式，显示已添加
            button.textContent = "已添加";
            button.classList.add('btn-success');
            // 3秒后恢复原状
            setTimeout(function() {
                button.textContent = "加入想看";
                button.classList.remove('btn-success');
            }, 3000);
            
            console.log("已将电影添加到想看清单");
        }
        // 标记为已看功能
        function markAsWatched(button) {
            // 改变按钮样式，显示已观看
            button.textContent = "已观看";
            button.classList.add('btn-success');
            // 3秒后恢复原状
            setTimeout(function() {
                button.textContent = "标记已看";
                button.classList.remove('btn-success');
            }, 3000);
            console.log("已将电影标记为已观看");
        }
        // 搜索功能
        document.querySelector('.search button').addEventListener('click', function() {
            var searchInput = document.querySelector('.search input').value;
            if(searchInput.trim() !== '') {
                alert('搜索功能：' + searchInput);
            }
        });
        // 回车搜索
        document.querySelector('.search input').addEventListener('keypress', function(e) {
            if(e.key === 'Enter') {
                var searchInput = this.value;
                if(searchInput.trim() !== '') {
                    alert('搜索功能：' + searchInput);
                }
            }
        });
    </script>
</body>
</html>